/*
* @Author: Yejing
* @Date: 2023-05-29 17:39:21
* @LastEditors: Yejing
* @LastEditTime: 2023-05-30 15:45:46
* @Description: 三种状态的商品卡片
*/
<template>
    <view class="c-product-card">
        <view class="best-list box">
            <view class="left">
                <u-image  width="160rpx" height="160rpx" :src="card.url"></u-image>
                <view class="nu">
                    <view class="top">
                        <text>{{ card.name }}</text>
                        <text>{{ card.info }}</text>
                    </view>
                    <text v-if="type=='money'">${{ card.money }}</text>
                    <view class="u-tag" v-if="type=='live'">
                        <u-image :src="tagS" width="17rpx" height="18rpx"></u-image>
                        Live
                    </view>
                </view>
            </view>
            <view class="right">
                <text>
                    <u-icon name="arrow-right" color="#fff" size="24"></u-icon>
                </text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        //卡片数据
        card: {
            type: Object,
            default: {}
        },
        //类型
        type: {
            type: String,
            default: 'money'
        }
    },
    data() {
        return {
            tagS: require('static/images/iconS.png')
        }
    }
}
</script>

<style lang="scss" scoped>
.best-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200rpx;
  background: #FFFFFF;
  border-radius: 26rpx;
  border: 2rpx solid #E1E8E8;
  padding: 20rpx 40rpx 20rpx 20rpx;
  margin-bottom: 30rpx;

  .left {
    display: flex;

    .nu {
      display: flex;
      flex-direction: column;
      margin-left: 20rpx;

      .top {
        flex: 1;
      }

      .u-tag {
        background: #2934D0 !important;
        border-radius: 6rpx;
        color: #fff;
        width: 95rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .u-image {
          margin-right: 5rpx;
          top: -12rpx;
        }

      }

    }
  }
}

.box {
  .left {
    uni-text {
      display: block;


      &:nth-child(1) {
        font-size: 36rpx;
        color: #02010E;
      }

      &:nth-child(2) {
        font-size: 30rpx;
        color: #6A6A6A;
        padding: 5rpx 0;
      }

      &:nth-child(3) {
        font-size: 36rpx;
        color: #02010E;
      }
    }
  }

  .right {
    uni-text {
      display: block;
      width: 60rpx;
      height: 60rpx;
      background: #1B1D29;
      border-radius: 14rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>